<template>
	<div class="home">
		<top name="榆林市公共资源交易平台数字见证大厅"></top>
		<div class="homemain">
			<div class="homeMainLeft">
				<div class="item">
					<item name="今日交易见证">
						<item1></item1>
					</item>
				</div>
				<div class="item">
          <router-link to="/pageLive" custom >
            <item name="今日场地使用情况" :delay="0.5">
              <item2></item2>
            </item>
          </router-link>
				</div>
				<div class="item">
					<item name="累计发现问题TOP3" :delay="1">
						<item3></item3>
					</item>
				</div>
			</div>
			<div class="homeMainCenter">
				<div class="item1 wow fadeInDown">
					<router-link to="/pageList" custom >
						<item4></item4>
					</router-link>
				</div>
				<div class="item2 wow fadeInDown" data-wow-duration="1.5s" data-wow-delay="0.5s">
					<item5></item5>
				</div>
				<div class="item3 wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">
					<item6></item6>
				</div>
			</div>
			<div class="homeMainRight">
				<div class="item">
					<item name="本月项目平均见证时长" :delay="0">
						<item7></item7>
					</item>
				</div>
				<div class="item">
					<item name="本月交易环节合规率" :delay="0.5">
						<item8></item8>
					</item>
				</div>
				<div class="item">
					<item name="本月交易主体行为合规率" :delay="1">
						<item9></item9>
					</item>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import top from "@/components/top/index.vue";
	import item from "./components/item/index.vue";
	import item1 from "./components/item1/index.vue";
	import item2 from "./components/item2/index.vue";
	import item3 from "./components/item3/index.vue";
	import item4 from "./components/item4/index.vue";
	import item5 from "./components/item5/index.vue";
	import item6 from "./components/item6/index.vue";
	import item7 from "./components/item7/index.vue";
	import item8 from "./components/item8/index.vue";
	import item9 from "./components/item9/index.vue";
	export default {
		name: 'Ksh',
		data() {
			return {}
		},
		components: {
			top,
			item,
			item1,
			item2,
			item3,
			item4,
			item5,
			item6,
			item7,
			item8,
			item9
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		position: fixed;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: column;
		background: url("../../../../assets/bg.jpg");
		background-size: 100% 100%;
	}

	.homemain {
		position: relative;
		width: calc(100% - 40px);
		margin-left: 20px;
		height: calc(100% - 128px);
		display: flex;
		z-index: 1;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;




		.homeMainLeft {
			position: relative;
			width: 25.5%;
			height: 100%;
			// padding-top: 22px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: column;
			align-content: flex-start;

			.item {
				position: relative;
				height: calc(33.33% - 12px);
				width: 100%;
			}
		}

		.homeMainCenter {
			position: relative;
			width: calc(49% - 56px);
			height: 100%;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: column;
			align-content: flex-start;

			.item1 {
				position: relative;
				height: calc(15.55% - 0px);
				width: 100%;
			}

			.item2 {
				position: relative;
				height: 48%;
				width: 100%;
			}

			.item3 {
				position: relative;
				height: calc(36.45% - 15px);
				width: 100%;
				margin-top: 15px;
			}
		}

		.homeMainRight {
			position: relative;
			width: 25.5%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: column;
			align-content: flex-start;

			.item {
				position: relative;
				height: calc(33.33% - 12px);
				width: 100%;
			}
		}
	}
</style>
